<template>
  <!-- form -->
  <el-form :model="queryForm" inline>
    <el-row>
 <el-form-item label="售后编号">
      <el-input v-model="queryForm.sn" placeholder="请输入售后编号"></el-input>
    </el-form-item>
    <el-form-item label="订单编号">
      <el-input v-model="queryForm.orderNo" placeholder="请输入订单编号"></el-input>
    </el-form-item>
    <el-form-item label="客户名称">
      <el-input v-model="queryForm.customer" placeholder="请输入客户名称"></el-input>
    </el-form-item>
    </el-row>
    
    <el-row>
    <el-form-item label="售后类型">
      <el-select v-model="queryForm.type" placeholder="请选择售后类型" style="width: 240px">
        <el-option label="修改订单" value="修改订单"></el-option>
        <el-option label="修改订单-电商" value="修改订单-电商"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="售后状态" >
      <el-select v-model="queryForm.status" placeholder="请选择售后状态" style="width: 240px">
        <el-option label="待审核" value="待审核"></el-option>
        <el-option label="待退款" value="待退款"></el-option>
        <el-option label="已完结" value="已完结"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button @click="resetForm" >重置</el-button>
    </el-form-item>
    </el-row>
  </el-form>







  <!-- table -->
<el-table :data="tableData" border>
  <el-table-column prop="sn" label="售后编号"></el-table-column>
  <el-table-column prop="status" label="售后状态"></el-table-column>
  <el-table-column prop="customer" label="客户名称"></el-table-column>
  <el-table-column prop="orderNo" label="订单编号"></el-table-column>
  <el-table-column prop="type" label="售后类型"></el-table-column>
      <!-- 新增操作列 -->
    <el-table-column label="操作" width="120">
      <template #default="{ row }">
   
        <el-button v-if="row.status === '待审核' && row.type === '修改订单'" size="small" type="primary" @click="handleAudit(row)">审核</el-button>

        <el-button v-if="row.status === '待退款' && row.type === '修改订单'" size="small" type="danger" @click="handleAudit(row)">退款</el-button>

        <el-button v-if="row.status === '已完结'&& row.type === '修改订单'" size="small" @click="handleAudit(row)">完结</el-button>
       

      </template>
    </el-table-column>
</el-table>






</template>
<script setup>

import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
// 筛选表单数据
let queryForm = reactive({
  sn: '', // 售后编号
  orderNo: '', // 订单编号
  customer: '', // 客户名称
  type: '', // 售后类型
  status: '' // 售后状态
})

// 表格测试数据
const allData = [
  { sn: 'ASMD20250717001', status: '待审核', customer: '张三', orderNo: 'MD20250714001', type: '修改订单-电商' },
  { sn: 'ASMD20250717002', status: '已完结', customer: '李四', orderNo: 'MD20250714002', type: '修改订单' },
  { sn: 'ASMD20250717003', status: '待退款', customer: '王五', orderNo: 'MD20250714003', type: '修改订单' },
  { sn: 'ASMD20250717004', status: '待审核', customer: '赵六', orderNo: 'MD20250714004', type: '修改订单' },
  { sn: 'ASMD20250717005', status: '已完结', customer: '钱七', orderNo: 'MD20250714005', type: '修改订单' },
  { sn: 'ASMD20250717006', status: '已完结', customer: '测试用户1', orderNo: 'MD20250714006', type: '修改订单-电商' },
  { sn: 'ASMD20250717007', status: '待审核', customer: '测试用户2', orderNo: 'MD20250714007', type: '修改订单' },
  { sn: 'ASMD20250717008', status: '待退款', customer: '周八', orderNo: 'MD20250714008', type: '修改订单-电商' },
  { sn: 'ASMD20250717009', status: '已完结', customer: '吴九', orderNo: 'MD20250714009', type: '修改订单' },
  { sn: 'ASMD20250717010', status: '待审核', customer: '郑十', orderNo: 'MD20250714010', type: '修改订单' },
  { sn: 'ASMD20250717011', status: '已完结', customer: '测试修改订单问题', orderNo: 'MD20250714011', type: '修改订单-电商' },
  { sn: 'ASMD20250717012', status: '待退款', customer: '林十一', orderNo: 'MD20250714012', type: '修改订单' },
  { sn: 'ASMD20250717013', status: '待审核', customer: '111', orderNo: 'MD20250714013', type: '修改订单' },
  { sn: 'ASMD20250717014', status: '已完结', customer: '测试用户3', orderNo: 'MD20250714014', type: '修改订单-电商' },
  { sn: 'ASMD20250717015', status: '待退款', customer: '陈十二', orderNo: 'MD20250714015', type: '修改订单' },
  { sn: 'ASMD20250717016', status: '待审核', customer: '测试用户4', orderNo: 'MD20250714016', type: '修改订单' },
  { sn: 'ASMD20250717017', status: '已完结', customer: '黄十三', orderNo: 'MD20250714017', type: '修改订单-电商' },
  { sn: 'ASMD20250717018', status: '已完结', customer: '测试用户5', orderNo: 'MD20250714018', type: '修改订单' },
  { sn: 'ASMD20250717019', status: '待审核', customer: '杨十四', orderNo: 'MD20250714019', type: '修改订单' },
  { sn: 'ASMD20250717020', status: '待退款', customer: '测试修改订单问题', orderNo: 'MD20250714020', type: '修改订单-电商' }
]

let tableData = ref([...allData])




//表单按钮事件

const search = () => { console.log(queryForm)
  // 筛选逻辑（图片中用户选择“待审核”）
  tableData.value = allData.filter(item => {
    // 当选择"待审核"时：仅保留status==='待审核'的记录
    if (queryForm.status) {
      if(item.status !== queryForm.status) {
        return false
      }
    }
    if(queryForm.type) {
      if(item.type !== queryForm.type) {
        return false
      }
    }
    // 未选择状态时：显示全部
    return true
  })
}

const resetForm = () => {
  // 重置表单数据（保持响应式）
  Object.assign(queryForm, {
    sn: '', // 售后编号
    orderNo: '', // 订单编号
    customer: '', // 客户名称
    type: '', // 售后类型
    status: '' // 售后状态
  })
  tableData.value = allData
}



onMounted(() => {
 // queryForm = tableData.value
})

//表格按钮事件
const handleAudit = (row) => {
console.log(row)

 router.push({
    name: 'tableprop',
    query: {
    id: row.sn,          // 唯一标识符（必传）
   status: row.status,  // 状态参数
  type: row.type,      // 类型参数
    // 添加其他需要传递的参数...
  }
  })

  if (row.status === '待审核') {
    ElMessage({
      message: '审核成功',
      type: 'success'
    })
  } else if (row.status === '待退款') {
    ElMessage({
      message: '退款成功',
      type: 'success'
    })
  } else if (row.status === '已完结') {
    ElMessage({
      message: '完结成功',
      type: 'success'
    })
  }
}

  




</script>

